 @layout("/common/_container.html"){
<style>
    .div_header {
        background: #f5f5f5;
        border-bottom: 1px solid #dddddd;
        color: #333;
        padding: 10px 15px;
    }

    .btnBox {
        background: #f5f5f5;
        border-top: 1px solid #dddddd;
        padding: 10px 15px;
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        text-align: right;
        height: 60px;
    }

    .btnBox button {
        margin: 0;
        color: white;
        background: #2b6594;
        width: 90px;
        border: 1px solid #dddddd;
    }

    .template_content span{
        top:3px;
        margin-right: 3px;
    }
    .template_content li{
        margin-bottom: 5px;
        cursor: pointer;
    }
    .ulShow{
        padding-left: 15px;
        display: none;
    }
    .ulShow > li {
        margin: 5px;
    }
    .spanTy{
        background: #428bca;
        color: white;
    }
</style>
<div class="ibox-content" style="height: 100%;padding-bottom: 60px;">
    <div style="display: none">
        <input type="hidden" id="customerId" value="${customerId}">
        <input type="hidden" id="customerName" value="${customerInfo.customerName}">
        <input type="hidden" id="startArrivalTime" value="">
        <input type="hidden" id="endArrivalTime" value="">
        <input type="hidden" id="backVisit">
        <input type="hidden" id="outpatientName" value="${outpatientName}">
        <input type="hidden" id="address" value="${deptInfo.address}">
        <input type="hidden" id="phone" value="${deptInfo.phone}">
        <div id="fieldTc"></div>
    </div>
    <div style="display: flex;height: 100%">
        <div style="flex: 1;margin-right: 15px;">
            <div style="border-radius: 5px;border: 1px solid #dddddd;height: 80%">
                <div class="div_header">消息模版</div>
                <div class="template_content">
                    <ul style="padding: 15px 0 0 20px;">
                        <li>
                            <span class="glyphicon glyphicon-triangle-right"></span>
                            <span style="display: none" class="glyphicon glyphicon-triangle-bottom"></span>
                            <span><span style="color: #eec900" class="glyphicon glyphicon-book"></span>医嘱</span>
                            <ul class="ulShow">
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>拔牙提醒</span></li>
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>儿童拔牙提醒</span></li>
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>结治提醒</span></li>
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>根管提醒</span></li>
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>消炎棉球提醒</span></li>
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>治疗提醒</span></li>
                            </ul>
                        </li>
                        <li>
                            <span class="glyphicon glyphicon-triangle-right"></span>
                            <span style="display: none" class="glyphicon glyphicon-triangle-bottom"></span>
                            <span><span style="color: #eec900" class="glyphicon glyphicon-book"></span>预约</span>
                            <ul class="ulShow">
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>预约提醒</span></li>
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>预约提醒2</span></li>
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>预约取消提醒</span></li>
                            </ul>
                        </li>
                        <li>
                            <span class="glyphicon glyphicon-triangle-right"></span>
                            <span style="display: none" class="glyphicon glyphicon-triangle-bottom"></span>
                            <span><span style="color: #eec900" class="glyphicon glyphicon-book"></span>节日问候</span>
                            <ul class="ulShow">
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>元旦祝福1</span></li>
                            </ul>
                        </li>
                        <li>
                            <span class="glyphicon glyphicon-triangle-right"></span>
                            <span style="display: none" class="glyphicon glyphicon-triangle-bottom"></span>
                            <span><span style="color: #eec900" class="glyphicon glyphicon-book"></span>生日祝福</span>
                            <ul class="ulShow">
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>生日祝福1</span></li>
                            </ul>
                        </li>
                        <li>
                            <span class="glyphicon glyphicon-triangle-right"></span>
                            <span style="display: none" class="glyphicon glyphicon-triangle-bottom"></span>
                            <span><span style="color: #eec900" class="glyphicon glyphicon-book"></span>优惠活动</span>
                            <ul class="ulShow">
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>优惠活动</span></li>
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>口腔保健卡</span></li>
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>最美微笑卡</span></li>
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>阖家欢乐卡</span></li>
                            </ul>
                        </li>
                        <li>
                            <span class="glyphicon glyphicon-triangle-right"></span>
                            <span style="display: none" class="glyphicon glyphicon-triangle-bottom"></span>
                            <span><span style="color: #eec900" class="glyphicon glyphicon-book"></span>诊所信息</span>
                            <ul class="ulShow">
                                <li><span style="padding: 5px"><span class="glyphicon glyphicon-bookmark"></span>交通方式</span></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="flex: 3;display: flex;flex-direction: column;border-radius: 5px;">
            <div style="flex: 1;border-radius: 5px;border: 1px solid #dddddd;margin-bottom: 15px;">
                <div class="div_header">患者信息</div>
                <div>
                    门诊：${customerInfo.outpatientName}&nbsp
                    病历号：${customerInfo.medicalRecordNumber}&nbsp
                    姓名：${customerInfo.customerName}&nbsp
                    性别：${customerInfo.sex}&nbsp
                    年龄：${customerInfo.customerAge}&nbsp
                    现场TC：${customerInfo.fieldTc}
                </div>
            </div>
            <div style="flex: 1;border-radius: 5px;border: 1px solid #dddddd">
                <div class="div_header">消息</div>
                <div style="display: flex;padding: 20px 0;">
                    <div style="flex: 1;text-align: center">
                        <div style="margin-bottom: 30px;">消息渠道</div>
                        <div style="margin-bottom: 30px;">手机号码</div>
                        <div style="margin-bottom: 30px;">消息内容</div>
                    </div>
                    <div style="flex: 4;">
                        <div style="margin-bottom: 30px;">
                            <input type="radio" name="message" checked="checked"/><span>短信</span>
                        </div>
                        <div style="margin-bottom: 30px;">
                            <input type="text" id="customerPhone" disabled="disabled" value="${customerInfo.customerPhone}">
                            <input type="checkbox" id="sqi" onclick="checkboxOnclick(this)"/><label
                                for="sqi">使用其他手机号</label>
                        </div>
                        <div style="margin-bottom: 30px;">
                            <textarea name="message_content" id="message_content"
                                      style="width: 97%;height: 120px;padding: 5px 0 0 10px;"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="btnBox">
        <button class="btn" type="button" style="background: white;color: #333333" onclick="Customer.close()">取消</button>
        <button class="btn" type="button" onclick="Customer.msgSend()">发送</button>
    </div>
</div>
<script src="${ctxPath}/static/modular/arrival/customer/customer.js"></script>
<script>
    function checkboxOnclick(checkbox) {
        if (checkbox.checked == true) {
            document.getElementById("customerPhone").value = "";
            $("#customerPhone").attr("disabled",false);
        } else {
            document.getElementById("customerPhone").value = "${customerInfo.customerPhone}";
            $("#customerPhone").attr("disabled",true);
        }
    }
    $(".template_content").on('click','li',function () {
        $(this).find('.ulShow').toggle();
        $(this).find('.glyphicon-triangle-right').toggle();
        $(this).find('.glyphicon-triangle-bottom').toggle();
    });
    $(".template_content").on('click','.ulShow li',function (e) {
        e.stopPropagation();
        $("span").removeClass("spanTy");
        $(this).children('span').addClass("spanTy");
        var customerName = $("#customerName").val();
        var outpatientName = $("#outpatientName").val();
        var address = $("#address").val();
        var phone = $("#phone").val();

        if($(this).text() == "拔牙提醒"){//通过
            $("#message_content").val("拔牙后一个小时后吐掉纱布，2小时内请勿饮食，24小时内请勿刷牙，漱口。术后48小时内请冰敷，一周内避免辛辣，热，硬食物。术后请服用消炎药，止痛药（饭后服用），并注意休息。如有疑问请致电"+phone+"，咿呀口腔（"+outpatientName+"）。")
        }else if($(this).text() == "儿童拔牙提醒"){//通过
            $("#message_content").val("儿童拔牙注意事项：半个小时后吐掉纱布，2小时内请勿饮食，24小时内请勿刷牙，一周内避免热食物，避免游泳、手指触碰或舌头舔拔牙处,并注意休息。如有疑问请致电"+phone+"，咿呀口腔（"+outpatientName+"）。")
        }else if($(this).text() == "结治提醒"){//通过
            $("#message_content").val("您好！您刚做过牙齿洁治，近期牙齿会很敏感，不宜食用辛辣，热，硬等刺激性食品，建议您每半年做一次洁治，如有疑问请致电"+phone+"，咿呀口腔（"+outpatientName+"）。")
        }else if($(this).text() == "根管提醒"){
            $("#message_content").val("您好！您今天做完了根充治疗，可能会出现疼痛甚至肿胀属药物反应，属正常反应，可服用一些消炎药，3天后疼痛最重，两周后逐渐好转。如有疑问，请致电"+phone+"，咿呀口腔（"+outpatientName+"）。")
        }else if($(this).text() == "消炎棉球提醒"){//通过
            $("#message_content").val("您好！今天我们在您的患牙中放置了消炎棉球，请不要漱口，棉球脱落可不予处理。如有疑问，请致电"+phone+"，咿呀口腔（"+outpatientName+"）。")
        }else if($(this).text() == "治疗提醒"){
            $("#message_content").val("您好！今天为您治疗了牙齿，请不要用其吃东西，患牙如出现冷、热不适属正常反应，如果疼痛加剧或暂封药完全脱落，请致电"+phone+"，咿呀口腔（"+outpatientName+"）。")
        }else if($(this).text() == "预约提醒"){
            $("#message_content").val("您好,您在咿呀口腔（"+outpatientName+"）预约的时间为xxxx年xx月xx日 xx:xx，如有时间变动请致电"+phone+"，咿呀口腔（"+outpatientName+"）。")
        }else if($(this).text() == "预约提醒2"){
                $("#message_content").val("您于2018年11月18日 09:00预约了杨盛军的检查，欢迎致电"+phone+"，咿呀口腔（"+outpatientName+"）。")
        }else if($(this).text() == "预约取消提醒"){
            $("#message_content").val("尊敬的"+customerName+"，您在咿呀口腔（"+outpatientName+"）原定于xxxx年xx月xx日 xx:xx xxx的预约已经成功取消。欢迎致电"+phone+"。")
        }else if($(this).text() == "元旦祝福1"){//通过
            $("#message_content").val("新的一年，新的开始；心的祝福，新的起点！祝福是份真心意，不是千言万语的表白，咿呀口腔（"+outpatientName+"）全体同仁祝福你新年快乐，万事如意！")
        }else if($(this).text() == "生日祝福1"){
            $("#message_content").val("尊敬的"+customerName+"，在这个属于你的精彩日子里,祝你生日快乐,工作顺利!愿你好上加好,福中更福! 咿呀口腔（"+outpatientName+"）。")
        }else if($(this).text() == "优惠活动"){
            $("#message_content").val("尊敬的"+customerName+"，为庆祝开业5周年，我诊所近期推出一系列优惠活动，欢迎致电"+phone+"垂询。咿呀口腔（"+outpatientName+"）。")
        }else if($(this).text() == "口腔保健卡"){//通过
            $("#message_content").val("您好！"+customerName+"您在我院办理的口腔保健卡，今消费普通超声波洁治X次，卡内剩余普通超声波洁治X次，赠送咿呀口腔定制牙刷3把，50元补牙代金券1张、100元正畸代金券1张、100元种植代金券1张。如有疑问，请及时与我们联系，咨询电话：027-88870787，祝您生活愉快。")
        }else if($(this).text() == "最美微笑卡"){//通过
            $("#message_content").val("您好！"+customerName+"您在我院办理的最美微笑卡，今消费普通超声波洁治+喷砂X次，卡内剩余普通超声波洁治+喷砂X次，赠送咿呀口腔定制爱丽丝储物罐三件套，50元补牙代金券1张、200元正畸代金券1张、200元种植代金券1张，900元冷光美白代金券1张（冷光美白项目原价参与活动，不与其它优惠活动同享）。如有疑问，请及时与我们联系，咨询电话：027-88870787，祝您生活愉快。")
        }else if($(this).text() == "阖家欢乐卡"){
            $("#message_content").val("您好！"+customerName+"您在我院办理的阖家欢乐卡，今消费EMS深层无痛洁治X次，卡内剩余EMS深层无痛洁治X次，赠送咿呀口腔定制爱丽丝储物罐三件套，50元补牙代金券1张、300元正畸代金券1张、300元种植代金券1张，900元冷光美白代金券1张（冷光美白项目原价参与活动，不与其它优惠活动同享）。如有疑问，请及时与我们联系，咨询电话：027-88870787，祝您生活愉快。")
        }else if($(this).text() == "交通方式"){
            $("#message_content").val("您好，欢迎致电咿呀口腔（"+outpatientName+"）。我所地址"+address+"，可乘坐xxx路，xxx路，xxx路，xxx路公交车xxx站下车，或地铁xxx号线xxx站下车，x号出口。联系电话"+phone+"。")
        }
    })
</script>
@}